<template>
  <!-- 1vw =1%视口的宽度  -->
  <div style="height: 100vh" class="common-layout">
    <el-container style="height: 100%">
      <el-header style="background-color: orange; text-align: right">
        <el-dropdown style="line-height: 60px">
          <span class="el-dropdown-link">
            <img
              style="width: 30px"
              src="https://img0.baidu.com/it/u=3240743188,721423289&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1191"
              alt=""
            />
            用户
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>登出</el-dropdown-item>
              <el-dropdown-item>购物车</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside style="background-color: skyblue" width="200px">
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-sub-menu index="1">
              <!-- 具名插槽 -->
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group title="Group One">
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title>item four</template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <span>Navigator Two</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <el-icon><document /></el-icon>
              <span>Navigator Three</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon><setting /></el-icon>
              <span>Navigator Four</span>
            </el-menu-item>
            <el-sub-menu index="5">
              <!-- 具名插槽 -->
              <template #title>
                <el-icon><location /></el-icon>
                <span>Navigator One</span>
              </template>
              <el-menu-item-group title="Group One">
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group Two">
                <el-menu-item index="1-3">item three</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title>item four</template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="6">
              <!-- 具名插槽 -->
              <template #title>
                <el-icon><location /></el-icon>
                <span>商品信息</span>
              </template>
              <el-menu-item-group title="分组 1">
                <el-menu-item index="1-1">列表</el-menu-item>
                <el-menu-item index="1-2">上线</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组 2">
                <el-menu-item index="1-3">下架</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title>标题</template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main style="background-color: yellowgreen">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="Date" width="180" />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column prop="address" label="Address" />
              <el-table-column prop="info" label="信息" />
            </el-table>
          </el-main>
          <el-footer style="background-color: brown">Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    info: '感觉自己闷闷哒',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    info: '感觉自己闷闷哒',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    info: '感觉自己闷闷哒',
  },
])
</script>
